// rncs  : 生成带有 StyleSheet 的代码

import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  View,
  Dimensions,
  ImageBackground,
  StatusBar,
  Image,
  TextInput,
  TouchableOpacity,
} from 'react-native';

const {width, height} = Dimensions.get('screen');

const rpx = x => (width / 750) * x;

export default class App extends Component {
  render() {
    return (
      <View>
        <StatusBar backgroundColor="rgba(0,0,0,0.2)" translucent />
        <ImageBackground
          blurRadius={9}
          style={{width, height}}
          source={require('./assets/bg.jpg')}>
          <View style={{height: StatusBar.currentHeight}} />

          <View style={ss.content}>
            {/* 用户名输入框 View>(Image+TextInput) */}
            <View style={ss.input_area}>
              <Image
                style={ss.input_area_icon}
                source={require('./assets/user.png')}
              />
              <TextInput style={ss.input_area_input} placeholder="用户名" />
            </View>
            {/* 密码框 View>(Image+TextInput) */}
            <View style={[ss.input_area, {marginTop: 20}]}>
              <Image
                style={ss.input_area_icon}
                source={require('./assets/mima.png')}
              />
              <TextInput
                secureTextEntry
                style={ss.input_area_input}
                placeholder="请输入密码"
              />
            </View>
            {/* 登录按钮 TouchableOpacity>Text */}
            <TouchableOpacity activeOpacity={0.7} style={ss.btn_login}>
              <Text style={ss.btn_login_title}>登录</Text>
            </TouchableOpacity>
            {/* 注册+忘记密码  View>((TouchableOpacity>Text)+(TouchableOpacity>Text)) */}
            <View style={ss.account}>
              <TouchableOpacity>
                <Text style={ss.account_title}>注册</Text>
              </TouchableOpacity>

              <TouchableOpacity>
                <Text style={ss.account_title}>忘记密码</Text>
              </TouchableOpacity>
            </View>

            {/* 第三方 */}
            <View style={ss.third}>
              <View style={ss.third_title}>
                <View style={{height: 1, flex: 1, backgroundColor: 'gray'}} />
                <Text style={{marginHorizontal: 10}}>其他方式登录</Text>
                <View style={{height: 1, flex: 1, backgroundColor: 'gray'}} />
              </View>
              <View style={ss.third_icons}>
                <TouchableOpacity>
                  <Image
                    source={require('./assets/qq.png')}
                    style={{width: rpx(80), height: rpx(80)}}
                  />
                </TouchableOpacity>

                <TouchableOpacity>
                  <Image
                    source={require('./assets/wexin.png')}
                    style={{
                      width: rpx(80),
                      height: rpx(80),
                      marginHorizontal: 40,
                    }}
                  />
                </TouchableOpacity>

                <TouchableOpacity>
                  <Image
                    source={require('./assets/weibo.png')}
                    style={{width: rpx(80), height: rpx(80)}}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </ImageBackground>
      </View>
    );
  }
}

const ss = StyleSheet.create({
  third_icons: {
    flexDirection: 'row',
    marginTop: 20,
    justifyContent: 'center',
  },
  third_title: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  third: {
    marginHorizontal: 20,
    marginTop: 'auto',
    marginBottom: 30,
  },
  account_title: {fontSize: rpx(30), color: 'gray'},
  account: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    marginTop: 20,
  },
  btn_login_title: {
    fontSize: rpx(40),
    color: 'white',
    textAlign: 'center',
  },
  btn_login: {
    backgroundColor: 'rgb(18, 150, 219)',
    borderRadius: 100,
    paddingVertical: 6,
    marginTop: 30,
  },
  input_area_icon: {width: rpx(60), height: rpx(60)},
  input_area_input: {
    fontSize: rpx(40),
    color: 'rgb(20,20,20)',
    marginLeft: 10,
    flex: 1,
  },
  input_area: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgb(230,230,230)',
    paddingHorizontal: 10,
    borderRadius: 8,
  },
  content: {
    backgroundColor: 'white',
    borderRadius: 10,
    height: '60%',
    marginHorizontal: rpx(60),
    marginTop: 130,
    padding: 20,
  },
});
